<template>
    <div>
        <span>我的车辆信息</span>
        <br>
        <el-dialog title="添加车辆信息" :visible.sync="open" width="500px" append-to-body>
            <el-input v-model="form.id" placeholder="请输入车牌号"></el-input>
            <br><br>
            <el-select v-model="form.carType" placeholder="请选择车型">
                <el-option label="小型车" value="小型车"></el-option>
                <el-option label="中型车" value="中型车"></el-option>
                <el-option label="大型车" value="大型车"></el-option>
            </el-select>
            <br><br>
            <el-input v-model="form.seatNumber" placeholder="请输入核定座位数"></el-input>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addFile">确 定</el-button>
                <el-button @click="open=false">取 消</el-button>
            </div>
        </el-dialog>

        <el-button type="primary" @click="open=true" style="display: flex">添加车辆信息</el-button>


        <el-table
                :data="fileList"
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="车牌号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="carType"
                    label="车辆类型"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="seatNumber"
                    label="核定座位数"
                    width="180">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-popconfirm title="确定删除该车辆信息吗？" @confirm="handleDelete(scope.row)">
                        <el-button
                                slot="reference"
                                type="danger"
                                size="mini">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    name: "mycar",
    data () {
        return {
            form:{
                id:'',
                carType:'',
                seatNumber:''
            },
            open: false,
            uploadUrl:'',
            fileList:[],
            show: false
        }
    },
    created() {
        this.getFileList();
    },
    methods:{
        addFile(){
            let vm = this;
            this.axios({
                url: '/myapi/user/car/addCar',
                method: 'put',
                data:{
                    carType: vm.form.carType,
                    id: vm.form.id,
                    seatNumber: vm.form.seatNumber,
                    uid: vm.$store.state.id
                }
            }).then(function (response) {
                if(response.data.success === true){
                    vm.$message({
                        message: '添加成功!',
                        type: 'success'
                    });
                    vm.getFileList();
                    vm.open = false;
                }
                else {
                    vm.$message.error('失败');
                }
            });
        },
        handleUploadForm(param) {
            console.log(this.form.type);
            let thisInfo = this
            let formData = new FormData()
            // 在formData中加入我们需要的参数
            formData.append('file', param.file)
            formData.append('type', this.form.type)

            // 向后端发送数据
            thisInfo.$axios.post('/myapi/Qiniu/upload', formData).then((res) => {
                if (res.data.success === true) {
                    thisInfo.$message.success('文件上传成功');
                    thisInfo.open = false;
                    thisInfo.getFileList();
                } else {
                    thisInfo.$message.success('文件上传失败')
                }
                thisInfo.formFileList = []
                thisInfo.uploadFormFileList = []
            })
        },

        beforeUploadHandle(file) {
            /*            if (file.type !== "pdf") {
                            this.$message.error("只支持pdf文件！");
                            return false;
                        }
                        return true;*/
        },

        handleDownload(row){
            let url = row.fileUrl;
            window.open("http://"+url);
            /*			console.log("url---------------"+url);
                        const ele = document.createElement('a');
                        ele.setAttribute('href', "http://"+url);
                        ele.setAttribute('download',"val.name");
                        ele.style.display = 'none';
                        document.body.appendChild(ele);
                        ele.click();
                        document.body.removeChild(ele);*/

        },
        handleDelete(row){
            let vm = this;
            this.axios({
                url: '/myapi/user/car/delectCar/'+row.id,
                method: 'delete'
            }).then(function (response) {
                if(response.data.success === true){
                    vm.$message({
                        message: '删除成功!',
                        type: 'success'
                    });
                    vm.getFileList();
                }
                else {
                    vm.$message.error('删除失败');
                }
            });
        },
        getFileList(){
            let vm = this;
            this.axios({
                url: '/myapi/user/car/getCar/'+vm.$store.state.id,
                method: 'get'
            }).then(function (response) {
                if(response.data.success === true){
                    vm.fileList = response.data.content;
                    console.log(vm.fileList);
                }
                else {
                    vm.$message.error('获取列表失败');
                }
            });
        }
    }
}
</script>

<style scoped>

</style>
